<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import Location from '@/components/Location/index.vue'
import Upload from '@/components/upload/index.vue'
import useModal from '@/hooks/useModal'
import cloneDeep from 'lodash/cloneDeep'
import useOptions from '@/hooks/useOptions'
const props = defineProps<{
  show: boolean
  id: number | string
  edit?: boolean
}>()
const emit = defineEmits(['update:show', 'confirm'])

const { options: classify } = useOptions({
  api: '/server-shop/admin/seller/category/list',
})
const { store } = useModal()
const formRef = ref({} as FormInstance)
const detail = reactive({
  id: props.id || '',
  account: '',
  address: '',
  backImg: '',
  brief: '',
  categoryId: '',
  city: '',
  district: '',
  ext: '',
  isAuditGoods: 0,
  isOpenPick: 0,
  isPush: 0,
  isSelf: 0,
  isShow: 0,
  keyword: '',
  lat: '',
  legalPerson: '',
  licenseImg: '',
  lng: '',
  logo: '',
  mobile: '',
  name: '',
  password: '',
  province: '',
  score: 0,
  serverRatio: -1,
  sort: 0,
  streetImg: '',
  typeId: '',
  userId: '',
  serverRatioSw: 0,
  pickOpenDate: '',
  pickOpenTime: '',
})
const submit = done => {
  const query = cloneDeep(detail)
  console.log('🚀 ~ submit ~ query:', query)
  // done(false)
  // return
  formRef.value.validate(err => {
    if (!err) {
      const url = props.id ? '/server-shop/admin/seller/update' : '/server-shop/admin/seller/save'
      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/admin/seller/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
    openConfigOption.forEach(item => {
      if (detail[item.value] == 1) checked.value.push(item.value)
    })
  })
}

const setMap = data => {
  const [lat, lng] = data.position
  const { province, city, district, street_number } = data.info.address_component
  detail.lat = lat
  detail.lng = lng
  detail.address = street_number
  detail.district = district
  detail.province = province
  detail.city = city
  store.cancel()
}

onMounted(() => {
  if (props.id) getInfo()
})
const openConfigOption = [
  { label: '审核商品', value: 'isAuditGoods' },
  // { label: '自提', value: 'isOpenPick' },
  { label: '推荐', value: 'isPush' },
  { label: '自营', value: 'isSelf' },
  { label: '显示', value: 'isShow' },
]
const checked = ref<string[]>([])
/**监听修改配置把选中项设置1 */
watch(
  () => checked.value,
  newVal => {
    newVal.map(key => {
      detail[key] = 1
    })
  }
)
</script>
<template>
  <CModal v-model:visible="props.show" :footer="$props.edit" @before-ok="submit" width="1000px" :title="props.id ? ($props.edit ? '编辑' : '查看') : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :disabled="!props.edit" :label-col-props="{ span: 7 }" :wrapper-col-props="{ span: 17 }">
        <div class="grid-2">
          <a-form-item label="商户名称" field="name" :rules="[{ required: true, message: '请输入商户名称' }]" :validate-trigger="['change', 'blur']">
            <a-input placeholder="请输入商户名称" v-model="detail.name" />
          </a-form-item>
          <a-form-item label="绑定用户" field="userId" :rules="[{ required: true, message: '请选择用户' }]" :validate-trigger="['change', 'blur']">
            <allow-search
              api="/server-user/admin/user/page"
              :fieldNames="{
                label: 'nickName',
                value: 'id',
              }"
              searchKey="mobile"
              v-model:val="detail.userId"
              placeholder="请输入手机号码搜索"
            />
            <!-- <a-select
              allow-search
              @dropdown-reach-bottom="onReatchBottom"
              :options="userList"
              :loading="searchQuery.loading"
              :field-names="{
                label: 'nickName',
                value: 'id',
              }"
              v-model="detail.userId"
              placeholder="请选择"
            /> -->
          </a-form-item>
          <a-form-item label="负责人" field="name" :rules="[{ required: true, message: '请输入门店负责人' }]" :validate-trigger="['change', 'blur']">
            <a-input placeholder="请输入门店负责人" v-model="detail.legalPerson" />
          </a-form-item>
          <a-form-item label="商户分类" field="categoryId" :rules="[{ required: true, message: '请选择商户分类' }]" :validate-trigger="['change', 'blur']">
            <a-select :options="classify" placeholder="请选择商户分类" v-model="detail.categoryId" />
          </a-form-item>
          <a-form-item label="手机号码" field="mobile" :rules="[{ required: true, message: '请输入手机号码' }]" :validate-trigger="['change', 'blur']">
            <a-input placeholder="请输入手机号码" v-model="detail.mobile" :disabled="!!props.id" />
          </a-form-item>
          <!-- <a-form-item label="商户评分" field="score" :rules="[{ required: true, message: '请选商户评分' }]" :validate-trigger="['change', 'blur']">
            <a-rate v-model="detail.score" allow-clear size="14" />
          </a-form-item> -->
          <!-- <a-form-item label="登录账号" field="account" :rules="[{ required: true, message: '请输入登录账号' }]" :validate-trigger="['change', 'blur']">
            <a-input placeholder="请输入登录账号" v-model="detail.account" />
          </a-form-item> -->
          <a-form-item v-if="!$props.id" label="登录密码" field="password" :rules="[{ required: true, message: '请输入登录密码' }]" :validate-trigger="['change', 'blur']">
            <a-input-password placeholder="请输入登录密码" v-model="detail.password" />
          </a-form-item>
          <!-- <a-form-item label="商户类型" field="typeId" :rules="[{ required: true, message: '请选择商户类型' }]" :validate-trigger="['change', 'blur']">
            <a-select :options="typeList" :field-names="{ label: 'name', value: 'id' }" placeholder="请选择商户类型" v-model="detail.typeId" />
          </a-form-item> -->

          <a-form-item label="自定义手续费开关" field="serverRatioSw">
            <a-radio-group
              v-model="detail.serverRatioSw"
              :options="[
                { label: '开启', value: 1 },
                { label: '关闭', value: 0 },
              ]"
            ></a-radio-group>
          </a-form-item>
          <a-form-item label="平台手续费" v-if="detail.serverRatioSw == 1" extra="设为-1时获取商户分类下配置的平台手续费">
            <a-input-number :min="-1" v-model="detail.serverRatio" hide-button>
              <template #append>%</template>
            </a-input-number>
          </a-form-item>

          <a-form-item field="lat" label="坐标" :rules="[{ required: true, message: '请选择坐标' }]" :validate-trigger="['change', 'blur']">
            <a-button type="primary" @click="store.handleShow({})">坐标拾取</a-button>
          </a-form-item>
          <a-form-item field="address" label="地址" :rules="[{ required: true, message: '请操作坐标拾取获得或手动修改' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.address" placeholder="请操作坐标拾取获得或手动修改" />
          </a-form-item>
          <a-form-item label="开启配置">
            <a-checkbox-group :options="openConfigOption" v-model="checked" />
          </a-form-item>
          <a-form-item label="商户头图" field="logo" extra="1:1" :rules="[{ required: true, message: '请上传商户头图' }]" :validate-trigger="[]">
            <Upload :list="detail.logo" :disabled="!props.edit" v-model:value="detail.logo" :limit="1" />
          </a-form-item>
          <a-form-item label="背景图" field="backImg" extra="646*398" :rules="[{ required: true, message: '请上传背景图' }]" :validate-trigger="[]">
            <Upload :limit="1" :disabled="!props.edit" :list="detail.backImg" v-model:value="detail.backImg" />
          </a-form-item>
          <a-form-item label="资质图" field="licenseImg" :rules="[{ required: true, message: '请上传资质图' }]" :validate-trigger="[]">
            <Upload :disabled="!props.edit" :limit="5" :list="detail.licenseImg" v-model:value="detail.licenseImg" />
          </a-form-item>

          <a-form-item label="简介" :label-col-style="{ flex: '0 0 12%' }" :wrapper-col-style="{ width: '87%', flex: '0 0 88%' }" style="grid-column: 1 / -1">
            <a-textarea v-model="detail.brief" placeholder="请输入简介" />
          </a-form-item>
        </div>
      </a-form>
    </div>
    <Location v-if="store.show" v-model:show="store.show" @setMap="setMap" />
  </CModal>
</template>
<style lang="less" scoped>
.grid-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.user-box {
  cursor: pointer;
}
</style>
